<!DOCTYPE html>
<html>

<head>
    <title>
        <%= title %>
    </title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
</head>

<body>
    <form action="/saveUser" method="get">
        <h1>投票列表</h1>
        
        <table class="table">
            <thead>
                <th>#</th>
                <th>姓名</th>
                <th>票数</th>
            </thead>
            <tbody>
                <% 
                    jsonResult = JSON.parse(result)
                    for(var i=0; i<jsonResult.length; i++) { 
                %>
                <tr>
                    <td><%= i+1 %> </td>
                    <td><%= jsonResult[i].name %></td>
                    <td><%= jsonResult[i].votenum %></td>
                </tr>
                <% } %>
            </tbody>
        </table>
        
        名字：
        <input type="text" name="username" id="username" />
        <button type="button" onclick="saveUserVote()">提交</button>
    </form>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
        function saveUserVote () {
            var username = $("#username").val()
            $.get ("/saveUser?username="+username,function(data){
                alert("交易ID: "+ data)
                location.reload()
            })
        }
    </script>
</body>

</html>